<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <title>上传文件</title>
    <th:block th:replace="~{commons/commons::head}"/>
    <link rel="stylesheet" href="/static/bootstrap/bootstrap-fileinput/fileinput.min.css"><!--上传组件css-->
    <script src="/static/bootstrap/bootstrap-fileinput/fileinput.min.js"></script><!--上传组件js-->
    <script src="/static/bootstrap/bootstrap-fileinput/zh.min.js"></script><!--上传组件中文化js-->
</head>
<style>
    .uploadContainer{
        width: 80%;
        margin: 10px auto 70px auto;
    }
    .goBack{
        margin: 10px auto 20px auto;
        text-align: center;
    }
</style>
<body>

<div th:replace="~{commons/commons::top}"></div>

<div id="app">
    <div class="container-fluid">

        <div class="container" style="margin-top: 50px">
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header">
                            <span class="lead">上传文件</span>
                        </div>
                        <div class="card-body" style="padding: 0 15px;line-height: 40px;">
                            <span>请上传你的视频文件</span>
                        </div>
                        <div class="table-responsive">
                            <div class="uploadContainer">
                                <div class="goBack">
                                    <a href="/student/goBack" class="btn btn-outline-success">
                                        返回首页
                                    </a>
                                </div>

                                <!--上传文件-->
                                <input type="file" class="custom-file-input" id="uploadFile" name="file" accept=".avi,.mov,.rm,.mkv,.flv,.mp4,.3GP" required>

                                <div class="form-group">
                                    <label for="typeID">文件类别</label>
                                    <select class="form-control" name="typeID" id="typeID" required>
                                        <option value=""></option>
                                        <option value="1">c语言</option>
                                        <option value="2">javaEE开发</option>
                                        <option value="3">mysql</option>
                                        <option value="4">html</option>
                                        <option value="5">css</option>
                                        <option value="6">JavaScript</option>
                                        <option value="7">springmvc</option>
                                        <option value="8">spring</option>
                                        <option value="9">mybatis</option>
                                    </select>
                                    <small class="form-text text-muted">必须选择文件类别</small>
                                </div>
                                <div class="form-group">
                                    <label for="fileName">文件名称</label>
                                    <input type="text" class="form-control" name="fileName" id="fileName">
                                    <small class="form-text text-muted">如果为空则使用文件默认名称</small>
                                </div>
                                <div class="form-group">
                                    <label for="fileNote">文件备注</label>
                                    <input type="text" class="form-control" name="fileNote" id="fileNote">
                                    <small class="form-text text-muted">文件备注，如果没有则不填或填无</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <script>
            $(function() {

                /*消息弹窗全局配置*/
                Qmsg.config({
                    showClose:true,
                    timeout:2000,
                    autoClose:true
                })

                //初始化fileinput
                let fileInput = new FileInput();
                fileInput.Init("uploadFile", "/file/upload/");
            });

            //初始化fileinput
            let FileInput = function() {
                let oFile = {};

                //初始化fileinput控件（第一次初始化）
                oFile.Init = function(ctrlName, uploadUrl) {
                    let control = $('#' + ctrlName);
                    let suffixArr = ['mp4','avi','mpeg','flv','mkv','mov'];
                    let typeID =  $("#typeID")
                    let fileName =  $("#fileName")
                    let fileNote =  $("#fileNote")

                    //初始化上传控件的样式
                    control.fileinput({
                        language: 'zh', //设置语言
                        uploadUrl: uploadUrl, //上传的地址
                        allowedFileExtensions: suffixArr, //接收的文件后缀
                        uploadAsync: true, //默认异步上传

                        showUpload: true, //是否显示上传按钮
                        showRemove: true, //显示移除按钮
                        showCaption: true, //是否显示标题

                        dropZoneEnabled: true, //是否显示拖拽区域

                        //minImageWidth: 50, //图片的最小宽度
                        //minImageHeight: 50,//图片的最小高度
                        //maxImageWidth: 1000,//图片的最大宽度
                        //maxImageHeight: 1000,//图片的最大高度
                        //maxFileSize:0,//单位为kb，如果为0表示不限制文件大小
                        //minFileCount: 0,
                        maxFileCount: 10, //表示允许同时上传的最大文件个数
                        //enctype: 'multipart/form-data',

                        browseClass: "btn btn-primary", //按钮样式: btn-default、btn-primary、btn-danger、btn-info、btn-warning
                        previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
                        uploadExtraData: (previewId, index)=> {//携带其他一些数据的格式
                            return {
                                typeID: typeID.val(),
                                fileName: fileName.val(),
                                fileNote: fileNote.val(),
                            };
                        },
                    });

                    $('#uploadFile').on('filepreajax',function (event, previewId, index) {
                        let name = $(this).val()
                        let prefix = name.substring(name.lastIndexOf('\\') + 1);
                        let suffix = name.substring(name.lastIndexOf('.') + 1);
                        console.log('文件路径:' + prefix);
                        console.log('文件名:' + prefix);
                        console.log('后缀名:' + suffix);
                        console.log(typeID.val());

                        if (prefix.length > 20){
                            Qmsg.warning("文件名太长，需小于20个字符",{position:'center', autoClose:false});
                            return false;
                        }
                        if (!suffixArr.includes(suffix)){
                            Qmsg.warning("文件类型错误，请重新选择",{position:'center', autoClose:false});
                            return false;
                        }
                        if (typeID.val() === ""){
                            Qmsg.warning("必须选择文件类型",{position:'center', autoClose:false});
                            return false;
                        }
                    });

                    //文件上传完成之后发生的事件
                    $("#uploadFile").on("fileuploaded", function(event, data, previewId, index) {
                        if (data.response.msg === "文件为空"){
                            Qmsg.info("文件为空",{position:'center'});
                        }else if (data.response.msg === "类型错误"){
                            Qmsg.info("类型错误",{position:'center'});
                        }else if (data.response.msg === "上传失败"){
                            $(".progress-bar").addClass("bg-danger progress-bar-danger")
                            Qmsg.warning("上传失败",{position:'center'});
                            return false;
                        }else {
                            $(this).fileinput('clear')
                            Qmsg.success("上传成功",{position:'center'});
                        }
                    });
                }
                return oFile;   //这里必须返回oFile对象，否则FileInput组件初始化不成功
            };

        </script>

    </div>
</div>

</body>
</html>
